<template>
  <div class="brandlist">
    <div class="brandlist-part" v-for="item in brandTwoData" :key="item.id">
      <div class="brandlist-part-title">
        <div class="brandlist-part-title-log">
          <img :src="item.brandLogo" alt="" />
        </div>
        <div class="brandlist-part-title-info">
          <div class="brandlist-part-title-name">{{ item.brandName }}</div>
          <div class="bubble" v-if="item.label">
            <span>{{ item.label }}</span>
          </div>
          <div class="msg">
            <span>{{ item.brandLabelOne.val }}</span>
            |
            <span>{{ item.brandLabelTwo.val }}</span>
          </div>
          <div class="num">
            已售{{
              (item.recentSale =
                item.recentSale > 10000
                  ? (item.recentSale / 10000).toFixed(1) + "万"
                  : item.recentSale)
            }}件
          </div>
        </div>
      </div>
      <div class="brandlist-part-product">
        <div
          class="brandlist-part-product-code"
          v-for="v in item.hotPush"
          :key="v.id"
        >
          <div class="brandlist-part-product-img">
            <div class="img-active">
              <img :src="v?.normalLabel?.img" alt="" />
            </div>
            <div class="img-product">
              <img :src="v.pic" alt="" />
              <div class="img-tag">{{ v.discount }}折</div>
            </div>
          </div>
          <div class="textarea">
            <div class="price">
              <div class="price-tag">￥</div>
              <div class="current-price">{{ v.jiage }}</div>
              <div class="pre-price">￥{{ v.yuanjia }}</div>
            </div>
            <div class="tag">
              <div class="merchantTag" v-for="(y, i) in v.goodsLabels" :key="i">
                {{
                  (y.val =
                    y.val.indexOf("聚划算") == -1 ? y.val : y.val.slice(0, 1))
                }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { computed, defineComponent } from "vue";
import { useStore } from "vuex";

export default defineComponent({
  setup() {
    const store = useStore();
    const brandTwoData = computed(() => {
      return store.state.brand.brandTwoData;
    });

    const brandList = computed(() => {
      return store.state.brand.brandList;
    });

    return { brandTwoData, brandList };
  },
});
</script>

<style lang="stylus" scoped>
.brandlist
    margin .05rem .1rem
    .brandlist-part
        background #fff
        margin-bottom .1rem
        border-radius .1rem
        padding-bottom .08rem
        .brandlist-part-title
            display flex
            position relative
            .brandlist-part-title-log
                width .5rem
                height .5rem
                box-shadow 0 .01rem .04rem -.01rem rgb(94 107 121 / 20%)
                border-radius .02rem
                margin-right .09rem
                margin-left .09rem
                margin-top .09rem
                display flex
                align-items center
                img
                    display block
                    width 100%
                    background #fff
            .brandlist-part-title-info
                color #333
                display flex
                flex-direction column
                margin-top .09rem
                .brandlist-part-title-name
                    height .27rem
                    font-size .16rem
                    font-font-weight 500
                    line-height .27rem
                    margin-bottom .03rem
                    max-width 1.35rem
                    display inline-block
                    overflow hidden
                    white-space nowrap
                    text-overflow ellipsis
                .bubble
                    padding 0 .03rem 0 .08rem
                    height .17rem
                    font-size .1rem
                    line-height .16rem
                    position relative
                    z-index 1
                    left .03rem
                    top -.02rem
                    text-align center
                    display inline-block
                    color #333
                    margin-top -.1rem
                    margin-left -.65rem
                    span
                        position absolute
                        background #f44
                        border-radius .04rem
                        padding 0 .06rem 0 .02rem
                        color #fff
                        text-align center
                        display inline-block
                        height .16rem
                        line-height .16rem
                        font-size .1rem
                .msg
                    font-size .12rem
                    color #f44
                    line-height .12rem
                    height .12rem
                    margin-bottom .08rem
                .num
                    font-size .12rem
                    color #9B9B9B
                    line-height .12rem
                    position absolute
                    z-index 1
                    left 2.7rem
                    transform translateY(.02rem)
        .brandlist-part-product
            background #fff
            padding 0 .1rem
            display flex
            justify-content space-around
            .brandlist-part-product-code
                position relative
                .brandlist-part-product-img
                    height 1.07rem
                    width 1.07rem
                    position relative
                    .img-active
                        width 1.07rem
                        img
                            width 100%
                            position absolute
                            top .84rem
                            right 0
                    .img-product
                        width 1.07rem
                        height 1.07rem
                        border-radius .06rem
                        img
                            width 100%
                        .img-tag
                            width .4rem
                            height .14rem
                            background linear-gradient(153deg,#fad961 0,#f76b1c 100%)
                            border-radius .07rem .07rem .07rem 0
                            font-size .1rem
                            transform scale(.9)
                            color #fff
                            text-align center
                            position absolute
                            bottom .05rem
                            right .03rem
                .textarea
                    padding .06rem 0 0 .04rem
                    .price
                        margin-bottom .04rem
                        display flex
                        align-items center
                        .price-tag
                            font-size .14rem
                            color #ff3b32
                            line-height .14rem
                            margin-right .025rem
                        .current-price
                            font-size .16rem
                            color #ff3b32
                            line-height .17rem
                            margin-right .09rem
                        .pre-price
                            font-size .11rem
                            color #aaa
                            line-height .12rem
                            text-decoration line-through
                    .tag
                        display flex
                        min-height .13rem
                        .merchantTag
                            box-sizing border-box
                            border-radius .03rem
                            opacity .7
                            border 1px solid #fe3a33
                            color #fe3a33
                            display inline-block
                            text-align center
                            height .13rem
                            line-height .13rem
                            margin-right .05rem
                            padding 0 .02rem
                            font-size .1rem
                            transform scale(.9)
</style>
